<script setup>
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
</script>
<template>
  <div>
    <header>
      <ul>
        <li
          @click="router.push('/stat/forget')"
          :class="['forget-curve', { acrive: route.path === '/stat/forget' }]"
        >
          遗忘曲线
        </li>
        <li
          @click="router.push('/stat/study')"
          :class="['forget-curve', { acrive: route.path === '/stat/study' }]"
        >
          学习情况
        </li>
        <li
          @click="router.push('/stat/time')"
          :class="['forget-curve', { acrive: route.path === '/stat/time' }]"
        >
          学习时间
        </li>
      </ul>
    </header>
  </div>
  <div><RouterView></RouterView></div>
</template>

<style scoped lang="less">
header > ul {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;

  .acrive {
    position: relative;
    color: #4fe773;
  }

  .acrive::before {
    content: '';
    position: absolute;
    left: 10px;
    bottom: -6px;
    right: 10px;
    border-top: 3px solid #4fe773;
  }
}
</style>
